<template>
    <DocSectionText v-bind="$attrs">
        <p>List of class names of the CSS animations used by the components.</p>
        <div class="doc-tablewrapper">
            <table class="doc-table">
                <thead>
                    <tr>
                        <th>Component</th>
                        <th>Enter Class</th>
                        <th>Leave Class</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <i>Accordion</i>
                        </td>
                        <td>.p-collapsible-enter-active</td>
                        <td>.p-collapsible-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>AutoComplete</i>
                        </td>
                        <td>.p-anchored-overlay-enter-active</td>
                        <td>.p-anchored-overlay-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>CascadeSelect</i>
                        </td>
                        <td>.p-anchored-overlay-enter-active</td>
                        <td>.p-anchored-overlay-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>ColorPicker</i>
                        </td>
                        <td>.p-anchored-overlay-enter-active</td>
                        <td>.p-anchored-overlay-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>ConfirmPopup</i>
                        </td>
                        <td>.p-anchored-overlay-enter-active</td>
                        <td>.p-anchored-overlay-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>ContextMenu</i>
                        </td>
                        <td>.p-anchored-overlay-enter-active</td>
                        <td>.p-anchored-overlay-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>DatePicker</i>
                        </td>
                        <td>.p-anchored-overlay-enter-active</td>
                        <td>.p-anchored-overlay-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Dialog</i>
                        </td>
                        <td>.p-dialog-enter-active</td>
                        <td>.p-dialog-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Drawer</i>
                        </td>
                        <td>.p-drawer-enter-active</td>
                        <td>.p-drawer-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Fieldset</i>
                        </td>
                        <td>.p-collapsible-enter-active</td>
                        <td>.p-collapsible-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Galleria</i>
                        </td>
                        <td>.p-galleria-enter-active</td>
                        <td>.p-galleria-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Image</i>
                        </td>
                        <td>.p-image-original-enter-active</td>
                        <td>.p-image-original-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Menu</i>
                        </td>
                        <td>.p-anchored-overlay-enter-active</td>
                        <td>.p-anchored-overlay-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Message</i>
                        </td>
                        <td>.p-message-enter-active</td>
                        <td>.p-message-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Modal Masks</i>
                        </td>
                        <td>.p-overlay-mask-enter-active</td>
                        <td>.p-overlay-mask-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>MultiSelect</i>
                        </td>
                        <td>.p-anchored-overlay-enter-active</td>
                        <td>.p-anchored-overlay-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Panel</i>
                        </td>
                        <td>.p-collapsible-enter-active</td>
                        <td>.p-collapsible-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>PanelMenu</i>
                        </td>
                        <td>.p-collapsible-enter-active</td>
                        <td>.p-collapsible-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Password</i>
                        </td>
                        <td>.p-anchored-overlay-enter-active</td>
                        <td>.p-anchored-overlay-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Select</i>
                        </td>
                        <td>.p-anchored-overlay-enter-active</td>
                        <td>.p-anchored-overlay-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Stepper</i>
                        </td>
                        <td>.p-collapsible-enter-active</td>
                        <td>.p-collapsible-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>TieredMenu</i>
                        </td>
                        <td>.p-anchored-overlay-enter-active</td>
                        <td>.p-anchored-overlay-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>Toast</i>
                        </td>
                        <td>.p-toast-message-enter-active</td>
                        <td>.p-toast-message-leave-active</td>
                    </tr>
                    <tr>
                        <td>
                            <i>TreeSelect</i>
                        </td>
                        <td>.p-anchored-overlay-enter-active</td>
                        <td>.p-anchored-overlay-leave-active</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </DocSectionText>
</template>
